<template>
  <div>
    <!-- 默认颜色 -->
    <div class="flex">
      <div><trend text="营业额"></trend></div>
      <div><trend type="down" text="销售额"></trend></div>
    </div>
    <!-- 自定义颜色 -->
    <div class="flex">
      <div><trend type="down" text="访问量" iconColor="#0f0"  ></trend></div>
      <div><trend text="回复数" textColor="#09f" iconColor="#f00" ></trend></div>
    </div>
    <!-- text 使用插槽 -->
    <div class="flex">
      <trend upIconColor="#e44133">销售业绩</trend>
    </div>
    <!-- 全部自定义  -->
    <div class="flex">
      <trend icon="carettop" iconColor="#f00" textColor="#f00" fontSize="24px" iconSize="24px">较上月总收入</trend>
      <trend icon="caretbottom" iconColor="#0f0" textColor="#0f0" text="较上月总支出" ></trend>
    </div>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.flex{
  display: flex;
  div{
    margin-right: 6px;
  }
}
</style>